<template>
    <div id="swiperTop"> 
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in state.images" :key="image">
                <img :src="image.pic" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import axios from 'axios'
import { getBanner } from '@/request/api/home.js'
import {reactive,onMounted} from 'vue'
export default ({
    setup() {
        const state = reactive({
            images: [
            'https://img2.baidu.com/it/u=46740166,3886875954&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=156',
            'https://img2.baidu.com/it/u=46740166,3886875954&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=156',
            ]
        });
        onMounted(async () => {
            // axios.get('http://localhost:3000/banner?type=2').then((res) => {
            //     console.log(res);
            //     state.images = res.data.banners
            //     console.log(state.images);
            // })
            let res = await getBanner();
            state.images = res.data.banners
        });
        return { state };
    },
})
</script>

<style lang="less" scoped>
#swiperTop{
    .van-swipe{
        width: 100%;
        height: 3rem;
        .van-swipe-item{
            padding: 0 0.2rem;
            img{
                width: 100%;
                height: 100%;
                border-radius:0.2rem;
            }
        }
        .van-swipe__indicator{
            background-color:rgb(219,130,130);
        }
    } 
}
</style>
